<template>
    <el-form ref="form" :model="form" :rules="rules" v-loading="loading" label-width="100px" @submit.native.prevent>

        <el-form-item label="用户账号" prop="username">
            <el-input v-model.trim="form.username" autocomplete="off" :disabled="isEdit"></el-input>
        </el-form-item>

        <el-form-item v-show="!isEdit" label="用户密码" prop="password">
            <el-input v-model.trim="form.password" autocomplete="new-password" :disabled="isEdit"
                      show-password></el-input>
        </el-form-item>

        <el-form-item label="所属角色" prop="role">
            <xy-role-select v-model="form.role" :hideOptions="['ADMIN','AGENCY','BLOC']"
                            :clearable="false" :disabled="isEdit"></xy-role-select>
        </el-form-item>

        <el-form-item label="绑定组织" prop="pointId">
<!--            <xy-store-simple-select :disabled="isEdit" v-if="form.role==='STORE'"-->
<!--                                    v-model="form.pointId"></xy-store-simple-select>-->
<!--            <xy-brand-simple-select :disabled="isEdit" v-if="form.role==='BRAND'"-->
<!--                                    v-model="form.pointId"></xy-brand-simple-select>-->
        </el-form-item>
        <el-form-item label="权限配置" prop="roleViewAuthName">
            <xy-role-view-select style="width: 350px" v-model="form.roleViewId" :role="form.role" :method="method"
                                 noDataText="请先选择"></xy-role-view-select>
        </el-form-item>

        <el-form-item label="用户昵称" prop="nickname">
            <el-input v-model.trim="form.nickname"></el-input>
        </el-form-item>

        <el-form-item label="描述信息" prop="descr">
            <el-input
                    show-word-limit
                    maxlength="255"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model.trim="form.descr">
            </el-input>
        </el-form-item>

        <el-form-item>
            <div style="text-align: right">
                <el-button type="primary" @click="submitForm">保存</el-button>
                <el-button :disabled="isEdit" @click="resetForm">重置</el-button>
            </div>
        </el-form-item>

    </el-form>
</template>

<script>
    import xyRoleSelect from './select/RoleSelect';
    import xyRoleViewSelect from './../role_view/RoleViewSelect.vue'

    /**
     * 用户表单
     * @author Canaan
     * @date 2019/7/25 15:38.
     */
    export default {
        name: 'UserInfoForm',
        mounted() {
            if (this.entity.id && this.method === 'PUT') {
                this.loadData(); //修改时要加载数据
            }
        },
        components: {
            xyRoleSelect,
            xyRoleViewSelect
        },
        props: {
            method: { //如果添加，就用post，修改就用put
                required: true
            },
            entity: {       //表单初始值
                type: Object,
                required: true,
                default() {
                    return {
                        id: null
                    }
                }
            },
            visible:undefined,
            version: undefined,
        },
        data() {
            return {
                pointIdLabel: '',
                form: {
                    id: this.entity.id,
                    nickname: null,
                    password: null,
                    username: null,
                    role: "STORE",
                    pointId: null,
                    descr: null,
                    roleViewId: null,
                    roleViewAuthName: null
                },
                rules: {
                    nickname: [
                        {required: true, message: '必填', trigger: 'blur'},
                        {min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur'}
                    ],
                    username: [
                        {required: true, message: '必填', trigger: 'blur'},
                        {min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur'},
                        {validator: this.verify.isUserName, trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '必填', trigger: 'blur'},
                        {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
                    ],
                    role: [
                        {required: true, message: '必填', trigger: 'blur'}
                    ],
                    pointId: [
                        {required: true, message: '必填', trigger: 'blur'}
                    ],
                    descr: [
                        {max: 255, message: '长度在 255 个字符', trigger: 'blur'}
                    ]
                },
                loading: false
            }
        },
        computed: {
            isEdit() {
                return this.method === 'PUT';
            },
        },
        methods: {

            /**
             * 重置表单
             * @author Canaan
             * @date 2019/7/22 16:02
             */
            resetForm() {
                this.$refs.form.resetFields();
                this.$refs.form.clearValidate();
            },
            /**
             * 加载数据
             * @author Canaan
             * @date 2019/7/22 16:02
             */
            loadData() {
                this.resetForm();
                if (!this.entity.id || this.method === 'POST') {
                    return;
                }
                this.loading = true;
                this.$ajax.get("user_info/get/" + this.entity.id)
                    .then(res => {
                        this.loading = false;
                        if (res.code === 'Base.notExist') {
                            this.$message.error("用户不存在");
                            this.$emit('submitSuccess', res);
                            return;
                        }
                        if (res.code !== 'ok') {
                            this.$message.error(res.msg);
                            return;
                        }
                        this.form = Object.assign({}, this.form, res.data);
                    });
            },
            /**
             * 提交表单
             * @author Canaan
             * @date 2019/7/22 16:02
             */
            submitForm() {
                let verify = true;
                this.$refs.form.validate((valid, obj) => {
                    if (obj && Object.getOwnPropertyNames(obj).length > 1) {
                        verify = false;
                    } else if (this.isEdit && obj['password']) {
                        verify = true;
                    } else {
                        verify = valid && verify;
                    }
                });
                if (!verify) {
                    return;
                }
                this.$ajax.request({
                    url: 'user_info/sync',
                    method: this.method,
                    data: this.form
                }).then(res => {
                    if (res.code !== "ok") {
                        this.$message.error(res.msg);
                    } else {
                        this.resetForm();
                        this.$emit('submitSuccess', res); //添加成功
                    }
                });
            }
        },
        watch: {
            visible(val){
                if (!val) {
                    this.form.roleViewId = null;
                }
            },
            version() {
                this.loadData();
            },
            //监听对象
            entity: {
                handler(val) {
                    this.form = Object.assign(this.form, val);
                },
                deep: true
            }
        },
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style scoped>

</style>